<template>
    <div class="wrapper">
        <div @click="deleteCustomer(1)">删除客户</div>
        <el-form :inline="true" label-position="left"  class="demo-form-inline">
            <el-row>
                <el-col :span="12">
                    <el-form-item label="提醒类型:">
                        <el-select placeholder="请选择" v-model="value">
                            <el-option
                                    v-for="item in options1"
                                    :label="item.label"
                                    :value="item.value"
                                    :key="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>

                <el-col :span="12">
                    <!--添加弹出框-->
                    <el-popover
                            ref="popover4"
                            placement="bottom"
                            width="447"
                            trigger="click">
                        <el-table :data="receiverList" element-loading-text="拼命加载中" v-loading="loading" height="200"  @row-click="selectReceiverRow" stripe>
                            <el-table-column type="index" width="70"></el-table-column>
                            <el-table-column width="120" prop="rid" label="用户名"></el-table-column>
                            <el-table-column width="120" prop="rcount" label="用户姓名"></el-table-column>
                            <el-table-column width="120" prop="fwflag" label="部门"></el-table-column>
                        </el-table>
                        <div class="receiver-pagination">
                            <el-pagination
                                    @size-change="popoverSizeChange"
                                    @current-change="popoverCurrentChange"
                                    :current-page="receiverCurrentPage"
                                    :page-size="10"
                                    layout="total, prev, pager, next"
                                    :total="receiverTotalCount">
                            </el-pagination>
                        </div>
                    </el-popover>
                    <el-form-item label="接收人:">
                        <el-input
                                v-popover:popover4
                                placeholder="接收人"
                                icon="el-icon-search"
                                v-model="receiver">
                        </el-input>
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row>
                <el-col :span="24">
                    <el-form-item label="创建时间:">
                        <!--<date-picker-range :dateRange="filter.createTime"></date-picker-range>-->
                        <el-date-picker
                                v-model="dateValue"
                                type="daterange"
                                align="right"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期"
                                :picker-options="pickerOptions">
                        </el-date-picker>
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row >
                <el-button type="primary" @click="query"><i class="fa fa-search"></i> 查询</el-button>
            </el-row>
        </el-form>

        <el-row class="customer_row">
            <el-table v-model="unreadNewsList" :data="unreadNewsList" @row-click="selectRow" stripe>
                <el-table-column type="index" width="70"></el-table-column>
                <el-table-column prop="rid" label="提醒标题"></el-table-column>
                <el-table-column prop="rcount" label="提醒类型"></el-table-column>
                <el-table-column prop="rsubject" label="提醒内容"></el-table-column>
                <el-table-column prop="fwflag" label="提醒状态"></el-table-column>
                <el-table-column label="提醒详情" @click="detail">
                    <template scope="scope" >
                        <el-button @click.native.prevent="detail" type="text">查看详情</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-row>

        <div class="pagination">
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-size="15"
                    layout="total, prev, pager, next"
                    :total="totalCount">
            </el-pagination>
        </div>

        <!--添加详情框-->
        <el-dialog @close="()=>{this.dialogVisible = false}" title="提醒详情" :visible.sync="dialogVisible" class="detail-dialog">
            <div class="items">
                <div class="item"><label>提醒标题:</label><span>{{dialog.title}}</span></div>
                <div class="item"><label>提醒类型:</label><span>{{dialog.type}}</span></div>
                <div class="item"><label>提醒状态:</label><span>已读</span></div>
                <div class="item"><label>创建时间:</label><span>{{dialog.time}}</span></div>
                <div class="item"><label>提醒内容:</label><span>{{dialog.content}}</span></div>
            </div>

            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="close(dialog.title)">关 闭</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
    import Vue from 'vue'
    import * as types from '../store/mutation-types/unread-news/index';
    import { mapGetters, mapActions, mapMutations} from 'vuex';
    import DatePickerRange from '~components/datePickerRange.vue'
    import axios from '~plugins/axios'

    import {Row, Col, Form, FormItem, Input, Select, Option, DatePicker, Cascader
            , ButtonGroup, Button, Table, TableColumn, Checkbox, CheckboxGroup,
            MessageBox, Pagination, Dialog, Popover, Loading } from 'element-ui'

    Vue.use(Row);
    Vue.use(Col);
    Vue.use(Form);
    Vue.use(FormItem);
    Vue.use(Input);
    Vue.use(Select);
    Vue.use(Option);
    Vue.use(DatePicker);
    Vue.use(ButtonGroup);
    Vue.use(Button);
    Vue.use(Table);
    Vue.use(TableColumn);
    Vue.use(Checkbox);
    Vue.use(CheckboxGroup);
    Vue.use(Pagination);
    Vue.use(Dialog);
    Vue.use(Popover);
    Vue.use(Loading);


    export default {
        components: {
            DatePickerRange
        },
        data () {
            return {
                options1: [{
                    value: 'options1-1',
                    label: '工作日志批复提醒'
                }, {
                    value: 'options1-2',
                    label: '公告提醒'
                }, {
                    value: 'options1-3',
                    label: '站内信提醒'
                }, {
                    value: 'options1-4',
                    label: '日程安排提醒'
                }, {
                    value: 'options1-5',
                    label: '获得手机号提醒'
                },{
                    value: 'options1-6',
                    label: '光荣榜提醒'
                },{
                    value: 'options1-7',
                    label: '日程提醒'
                },{
                    value: 'options1-8',
                    label: '跟进提醒'
                },{
                    value: 'options1-9',
                    label: '日程事件提醒'
                }],
                value: '',
                receiver: '',
                dialog: {
                    title: '',
                    type: '',
                    status: '',
                    time: '',
                    content: ''
                },
                dateValue: '',
                pickerOptions: {
                    shortcuts: [{
                        text: '最近一周',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近一个月',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近三个月',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                            picker.$emit('pick', [start, end]);
                        }
                    }]
                },
                selectIndex : [],
                dialogVisible: false,
                loading: false
            }
        },
        methods: {
            ...mapActions([
                'getUnreadNewsList',
                'getReceiverList'
            ]),
            handleSizeChange(){

            },
            popoverSizeChange() {

            },
            handleCurrentChange(index){
                this.getUnreadNewsList({infoType: 'TX', pageno: index })
            },
            popoverCurrentChange(index){
                this.getReceiverList({infoType: 'TX', pageno: index })
            },
            selectRow(row, event, column){
                this.dialog.title = row.rid;
                this.dialog.type = row.rcount;
                this.dialog.status = row.fwflag;
                this.dialog.time = row.rverifydate;
                this.dialog.content = row.rsubject;
            },
            selectReceiverRow(row, event, column) {
                this.receiver = row.rid
            },
            detail() {
                this.dialogVisible = true
            },
            query() {
            },
            close(title) {
                this.dialogVisible = false
                //TODO 删除该条未读消息
            },
            deleteCustomer(id){

                axios.post('http://192.168.61.92:8080/customer/delete', {
                    id: '1'
                })
            }
        },
        computed : {
            ...mapGetters({
                'unreadNewsList' : 'getUnreadNewsList',
                'totalCount' : 'getUnreadNewsTotalCount',
                'currentPage' : 'getUnreadNewsCurrentPage',
                'receiverList' : 'getReceiverList',
                'receiverTotalCount' : 'getReceiverTotalCount',
                'receiverCurrentPage' : 'getReceiverCurrentPage'
            })
        },
        created () {
            this.getUnreadNewsList({infoType: 'TX', pageno: '1' });
            this.getReceiverList({infoType: 'TX', pageno: '1' });
        }
    }

</script>
<style scoped type="sass">
    .customer_row {
        margin-top:20px;
    }
    .pagination{
        margin: 15px 0 ;
    }
    .receiver-pagination {
        margin: 10px 0 0 0;
    }
    .detail-dialog .items .item {
        margin: 10px 0;
    }
    .items .item label {
        margin-right: 20px;
    }

</style>